<template>
	<h1>测试保存状态</h1>
	
	<h2>1. 浏览器存储方式</h2>
	<p>
		<ul>
		<li>sessionStorage 浏览器打开期间存储</li>
		<li>localStorage 长期存储</li>
		</ul>
	</p>
	
	<input type="text" v-model="name1"/><br />
	<button @click="test1">保存</button><br />
	{{name2}}<br />
	<button @click="test2">读取</button><br />
	<button @click="test3">清除</button><br />
	
	
	<h2>2. 使用vuex存储信息</h2>
	<input type="text" v-model="username"/><br />
	<button @click="test4">登录</button><br />
	
	<h2>3. 测试用户登录</h2>
	用户名:<input type="text" v-model="username"/>
	密码:<input type="text" v-model="password"/>
	<button @click="login">登录</button><br />

</template>

<script>
	import axios from 'axios'
	
	export default {
		data(){
			return {
				name1:"",
				name2:"",
				username:"admin",
				password:"123456"
			}
		},
		methods:{
			test1()
			{
				console.log("test1");
				
				// BOM 浏览器对象
				window.localStorage.setItem('username',this.name1);
				// window.sessionStorage.setItem('username',this.name1);
			},
			test2()
			{
				console.log("test2");
				this.name2 = window.localStorage.getItem('username')
				// this.name2 = window.sessionStorage.getItem('username');
			},
			test3()
			{
				console.log("test3");
				window.localStorage.removeItem("username")
				// window.sessionStorage.removeItem("username")
				
			},
			test4()
			{
				console.log("test");
				this.$store.state.isLogin = 1;
				this.$store.state.username = this.username;
			},
			login()
			{
			
				// this.$router.replace("/");
				
				var p = axios.create().post("http://localhost:8080/api/test8",
					{
						username:this.username,
						password:this.password
					}
				);
				p.then(result=>{
					console.log(result.data);
					console.log(result.data.data);
					
					this.$store.state.isLogin = 1;
					this.$store.state.username = this.username;
					this.$store.state.token = result.data.data;
					
					this.$router.replace("/");
					
				})
				.catch(error=>{
					console.log(error);
				})
			}
		}
		
	}
	
</script>

<style>
	
</style>